<template>
  <view>
    <view class="detail-box" v-if="hideNormal!==true">
      <view class="title">
        基础信息
      </view>
      <view class="detail">
        <view class="detail-item" v-for="col in basicInfoCol">
          <view class="label">
            {{col.name||''}}:
          </view>
          <view class="value">
            <!-- {{detail[col.column]||'-'}} -->
            <input type="text" v-model="detail[col.column]" :disabled="mode!=='form'"
              :placeholder="mode==='form'?'请输入'+col.name:'-'" />
          </view>
        </view>
      </view>
    </view>

    <view class="detail-box">
      <view class="title" v-if="hideNormal!==true">
        私密档案
      </view>
      <view class="detail">
        <view class="detail-item" v-for="col in specialCol" :class="{'title-top':hideNormal===true}">
          <view class="label">
            {{col.name||''}}:
          </view>
          <view class="value">
            <!-- {{detail[col.column]||'-'}} -->
            <input v-model="detail[col.column]" placeholder="" :disabled="mode!=='form'"
              :placeholder="mode==='form'?'请输入'+col.name:'-'" />
          </view>
        </view>
      </view>
    </view>
    <view class="button-box">
      <button class="cu-btn bg-blue round" @click="changeMode('form')" v-if="mode==='detail'">编辑</button>
      <button class="cu-btn bg-blue round" @click="submit" v-if="mode==='form'">提交</button>
    </view>
  </view>
</template>

<script>
  const basicInfoCol = [{
      name: '会员号',
      column: 'hy_no'
    },
    {
      name: '姓名',
      column: 'hy_name'
    },
    {
      name: '联系电话',
      column: 'phone'
    },
    {
      name: '生日',
      column: 'birth_day'
    },
    {
      name: '爱好',
      column: 'hobby'
    },
    {
      name: '标签',
      column: 'customer_tag'
    },
    {
      name: '专属健管师',
      column: 'nutrilite_tube_division'
    }
  ]

  const specialCol = [{
      name: '既往病史',
      column: 'medical_history'
    },
    {
      name: '家族史',
      column: 'family_history'
    },
    {
      name: '易患疾病',
      column: 'liability_disease'
    },
    {
      name: '常服药物',
      column: 'regular_medication'
    },
    {
      name: '常服保健品',
      column: 'regular_health_care_products'
    }
  ]
  export default {
    data() {
      return {
        basicInfoCol: Object.freeze(basicInfoCol),
        specialCol: Object.freeze(specialCol),
        detail: {},
        initVal: {},
        mode: 'detail', //detail\form 详情、表单
        hy_no: "",
        hideNormal: false
      }
    },
    methods: {
      changeMode(e) {
        this.mode = e
      },
      submit() {
        let updateVal = {}
        basicInfoCol.forEach(item => {
          if (this.detail[item.column] !== this.initVal[item.column]) {
            updateVal[item.column] = this.detail[item.column]
          }
        })
        specialCol.forEach(item => {
          if (this.detail[item.column] !== this.initVal[item.column]) {
            updateVal[item.column] = this.detail[item.column]
          }
        })
        let keys = Object.keys(updateVal);
        if (keys.length > 0) {
          let url = this.$api.serverURL + `/fyzhmd/operate/srvstore_member_mgmt_update`
          let req = [{
            "serviceName": "srvstore_member_mgmt_update",
            "data": [updateVal],
            "condition": [{
              "colName": "id",
              "ruleType": "in",
              "value": this.detail.id
            }]
          }]
          if (this.detail?.id) {
            this.$http.post(url, req).then(res => {
              if (res.data.state === 'SUCCESS') {
                uni.showModal({
                  title: '提示',
                  content: '操作成功',
                  showCancel: false,
                  success: (res) => {
                    if (res.confirm) {
                      this.changeMode('detail')
                      this.getDetail()
                    }
                  }
                })
              }
            })
          }
        } else {
          uni.showToast({
            title: '没有可提交的数据！',
            icon: 'none'
          })
        }

      },
      getDetail() {
        let app = uni.getStorageSync('activeApp');
        let srevice = 'srvstore_member_mgmt_select'
        let url = this.getServiceUrl(app, srevice, 'select');
        let req = {
          serviceName: srevice,
          colNames: ['*'],
          condition: [{
            colName: 'hy_no',
            ruleType: 'eq',
            value: this.hy_no
          }],
          page: {
            pageNo: 1,
            rownumber: 1
          }
        };
        this.$http.post(url, req).then(res => {
          if (res.data.state === 'SUCCESS' && Array.isArray(res.data.data) && res.data.data.length > 0) {
            this.detail = res.data.data[0]
            this.initVal = this.deepClone(res.data.data[0])
          }
        })
      }
    },
    onLoad(option) {

      if (option.hideNormal) {
        this.hideNormal = true
        uni.setNavigationBarTitle({
          title: '私密档案'
        })
      }


      if (option.hy_no) {
        this.hy_no = option.hy_no
        this.getDetail()
      }

    }
  }
</script>

<style lang="scss" scoped>
  .button-box {
    text-align: center;
    padding: 10px 0 30px;

    .cu-btn {
      width: 60%;
    }
  }

  .detail-box {
    padding: 5px 10px;
    margin: 10px;
    background-color: #fff;
    border-radius: 10px;

    .title {
      font-size: 16px;
      font-weight: bold;
      padding: 5px 0;
    }

    .detail {
      display: flex;
      flex-wrap: wrap;

      .detail-item {
        width: 100%;
        // min-width: 60%;
        display: flex;
        align-items: center;
        padding: 5px 0;
        padding-right: 10px;
        font-weight: bold;

        .input-placeholder {
          font-weight: normal;
          font-size: 14px;
        }

        &.title-top {
          flex-direction: column;
          align-items: flex-start;
          margin-bottom: 10px;

          .label {
            text-align: left;
            margin-bottom: 5px;
            font-weight: bold;
          }

          .value {
            background-color: #fff;
            padding: 0;
            font-weight: normal;
          }
        }

        .label {
          margin-right: 10px;
          min-width: 80px;
          text-align: right;
          font-weight: normal;
        }

        .value {
          flex: 1;
          background-color: #f8f8f8;
          padding: 5px 10px;
          border-radius: 5px;
        }
      }
    }
  }
</style>
